<template>
    <div class="input-item">
      <el-form :model="fileForm" ref="fileForm" :rules="rules" label-width="250px">
          <div class="parameType-wrap">
                <div class="parameType">
                    <div class="button">
                        <!-- <span class="title2"> 文件共享服务</span> -->
                        <el-button style="float: right; padding:4px 8px;" type="primary" @click="operationClick('fileForm')">确定</el-button>
                    </div>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="共享服务检测规则间隔：" prop="check_access_rule_interval">
                            <el-input v-model="fileForm.check_access_rule_interval"><span slot="append">秒</span></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :lg="24">
                        <el-form-item label="开启共享服务：">
                            <el-checkbox v-model="fileForm.is_start_service_smb" false-label="0" true-label="1">SMB</el-checkbox>
                            <el-checkbox v-model="fileForm.is_start_service_ftp" false-label="0" true-label="1">SFTP</el-checkbox>
                        </el-form-item>
                    </el-col>
                </div>
          </div>    
      </el-form>
    </div>
</template>
  
<script>
import { connrequest } from '@/api/firstPage'
import { validNum } from '@/utils/validate'
export default {
    data() {
        return {
            fileForm:{
                check_access_rule_interval:'0',
                is_start_service_smb:'0',
                is_start_service_ftp:'0'
            },
            oldData:[],
            rules:{
                check_access_rule_interval:[{required:true,validator:validNum,trigger:'blur'}],
            }
        }
    },
    created(){
    this.getData()
    // console.log();
    
    },
    methods:{
        async getData(){
            // const data = {}
            const res = await connrequest('GetParamThreshhold')
            // console.log(res.Data);
            this.oldData = res.Data;
            res.Data = res.Data.map(item => {
                for (const i in this.fileForm) {
                    if (item.Name === i) {
                        this.fileForm[i] = item.Value
                    }
                }
            })
        },
        async operationClick(formName){
          this.$refs[formName].validate(async(valid) => {
            if (valid) {
              this.oldData = this.oldData.map(item => {
              for (const key in this.fileForm) {
                if(item.Name === key){
                  if (typeof this.fileForm[key] != 'string') {
                    item.Value = JSON.stringify(this.fileForm[key])
                  }else{
                    item.Value = this.fileForm[key]
                  }
                }
                }
                return item
              })
              const data = {
                Data:this.oldData
              }
              const res = await connrequest('SetParamThreshhold',data)
              this.$message.success('修改成功')
              this.getData();
            }
          })
        }
    }
}
</script>

<style lang="scss" scoped>
/* @import url(); 引入css类 */
.parameType-wrap{
    display:flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
::v-deep.input-item{
    // margin-top: 10px;
    .parameType{
    border: 1px solid #eceff5;
    border-radius: 3px;
    width: 600px;
    //   padding: 10px;
    margin: 0px;
    box-shadow: 0 0 10px #eceff5;
    .button{
        
        border-bottom: 1px solid #eceff5;
        padding-bottom : 32px;
    }
    }
    .el-form-item{
    margin-bottom: 6px;
    }
    .el-input-group__append, .el-input-group__prepend{
    width: 60px;
    padding: 0;
    text-align: center;
    }
}
.button{
    // display: flex;
    // justify-content: space-between;
    margin-bottom: 20px;
}
::v-deep.el-form-item{
    label{
    font-weight: 500;
    }
}
</style>